import { Form, Input, Button, Checkbox } from 'antd';
import { message } from 'antd';
import { useModel } from 'umi';
import styles from './index.less';

function IndexPage(props: any) {
  const { login, logout } = useModel('useTeacher');

  const loginBut = (values: any) => {
    login(values, props);
  };

  const logoutBut = () => {
    logout();
  };

  const onFinishFailed = (errorInfo: any) => {
    message.error(errorInfo.errorFields[0].errors[0])
  };
  
  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 12 }}
        initialValues={{ remember: true }}
        onFinish={loginBut}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        className={styles.form}
      >
        <Form.Item
          label="教师号"
          name="tId"
          rules={[{ required: true, message: '请输入教师号！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码！' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 6, span: 16 }}>
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
          <Button htmlType="button" onClick={logoutBut} className={styles.logoutBut}>
            登出
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default IndexPage;
